<template>
    <div>
        <el-dialog @close="close(ruleFormRef)" center v-model="info.isShow" :title="info.isAdd ? '添加菜单' : '修改菜单'">
            <el-form ref="ruleFormRef" :rules="rules" :model="menu">
                <el-form-item label="菜单名称" prop="title" :label-width="formLabelWidth">
                    <el-input v-model="menu.title" autocomplete="off" />
                </el-form-item>
                <el-form-item label="上级菜单" prop="pid" :label-width="formLabelWidth">
                    <el-select @change="changePid" v-model="menu.pid" placeholder="请选择">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <el-option v-for="item in menuList" :key="item.id" :label="item.title" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型" :label-width="formLabelWidth">
                    <el-radio disabled v-model="menu.type" :label="1">目录</el-radio>
                    <el-radio disabled v-model="menu.type" :label="2">菜单</el-radio>
                </el-form-item>
                <el-form-item v-if="menu.type == 1" label="菜单图标" :label-width="formLabelWidth">
                    <el-select v-model="menu.icon" placeholder="请选择">
                        <el-option v-for="item in iconList" :value="item" :key="item">
                            <el-icon>
                                <component :is="item"></component>
                            </el-icon>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-else label="菜单地址" :label-width="formLabelWidth">
                    <el-select @change="changePid" v-model="menu.url" placeholder="请选择">
                        <el-option v-for="item in indexRouter" :key="item.path" :label="item.meta.title" :value="item.path">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="menu.status"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="1"
                        :inactive-value="2" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="close(ruleFormRef)">取消</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef, info.isAdd)">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
// 引入接口
import { addMenu, menuInfo, menuEdit } from '@/request/app'
import { reactive, toRef, ref, defineProps, defineEmits, computed } from 'vue'
import type { FormInstance, FormRules, } from 'element-plus'
import {indexRouter} from '../../router/index'
// 弹窗
import { ElMessage } from 'element-plus'
// 仓库
import { useStore } from 'vuex'
// 仓库的列表行动
let store = useStore()
const menuList = computed(() => store.getters['menu/getMenuList'])
const getMenu = () => {
    store.dispatch('menu/getMenuListAction')
}
const iconList = ['Apple', 'FolderAdd', 'Discount', 'Calendar', 'Bicycle']
const ruleFormRef = ref<FormInstance>()
const formLabelWidth = '140px'
// 接收父组件传递的参数，控制弹窗显示隐藏以及标题的更换
defineProps(['info'])
// 表单信息
let menu = ref({
    pid: 0, //上级分类编号  注意：顶级菜单-0
    title: "", //菜单名称
    icon: "", //图标
    type: 1, //类型 1目录2菜单
    url: "", //菜单地址
    status: 1, //状态   1正常2禁用   number类型
})
// 定义变量接收编辑按钮的  id值
let newid:Number = 0
// 验证条件
const rules = reactive<FormRules>({
    title: [
        { required: true, message: '请输入菜单名称', trigger: 'blur' },
        { min: 3, max: 8, message: '长度限制在3到8', trigger: 'blur' },
    ],
    pid: [
        { required: true, message: '请选择上级菜单', trigger: 'blur' },
    ],
})
// 置空
let reset = () => {
    menu.value = {
        pid: 0, //上级分类编号  注意：顶级菜单-0
        title: "", //菜单名称
        icon: "", //图标
        type: 1, //类型 1目录2菜单
        url: "", //菜单地址
        status: 1, //状态   1正常2禁用   number类型
    }
}
// 传递给父组件 设置的自定义事件名
let emit = defineEmits(['close'])
//取消按钮事件
let close = (formEl: FormInstance | undefined) => {
    // 传递取消事件关闭弹窗
    emit('close', false)
    // 清空表单
    reset()
    if (!formEl) return
    formEl.resetFields()
}
// 通过pid控制类型选择
let changePid = (e:Number) => {
    console.log(e,'eeeee');
    menu.value.type = e == 0 ? 1 : 2
    // menu.value.type = menu.value.pid == 0 ? 1 : 2
}
// 回显
let lookup = (id: Number) => {
    newid = id
    console.log(id, 'id');
    // 调用查询接口
    menuInfo({ id })
        .then((res: any) => {
            console.log(res, '一条数据');
            menu.value = res.list
            // menu.value.id = id
        })
    console.log(menu.value, '回显添加id');
}
// 暴露子组件方法
defineExpose({
    lookup
})
// 确认事件
const submitForm = async (formEl: FormInstance | undefined, isAdd: any) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(menu.value, 'menu')
            if (isAdd) {
                // 添加
                // 添加接口
                addMenu(menu.value)
                    .then((res: any) => {
                        console.log(res, '添加');
                        if (res.code == 200) {
                            ElMessage.success(res.msg)
                            // 关闭弹窗
                            close(formEl)
                            // 重新调用列表行动
                            getMenu()
                        } else {
                            ElMessage.error(res.msg)
                        }
                    })
            } else {
                // 编辑
                menuEdit({
                    ...menu.value,
                    id:newid
                    })
                    .then((res: any) => {
                        console.log(res, '编辑');
                        if (res.code == 200) {
                            ElMessage.success(res.msg)
                            // 关闭弹窗
                            close(formEl)
                            // 重新调用列表行动
                            getMenu()
                        } else {
                            ElMessage.error(res.msg)
                        }
                    })
            }
            // 清空验证
            formEl.resetFields()
        } else {
            // console.log('error submit!', fields)
        }
    })
}

</script>

<style  lang="" scoped>

</style>
